<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="component/pageHead.jsp" %>

<!doctype html>
<html class="no-js" lang="zxx">
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Parlo - eCommerce Bootstrap 4 Template</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">
    <!-- CSS	============================================ --><!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css"><!-- Icon Font CSS -->
    <link rel="stylesheet" href="assets/css/icons.min.css"><!-- Plugins CSS -->
    <link rel="stylesheet" href="assets/css/plugins.css"><!-- Main Style CSS -->
    <link rel="stylesheet" href="assets/css/style.css"><!-- Modernizer JS -->
    <script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>
    <%-- vue--%>
    <script src="assets/js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- layui-->
    <script src="assets/layui/layui.js"></script>
    <link rel="stylesheet" href="assets/layui/css/layui.css" media="all">

    <link rel="stylesheet" href="css/shop.css"><!-- shop 的 css -->
</head>
<body>
<jsp:include page="component/head.jsp"></jsp:include>
<div class="wrapper" id="app1">


    <div class="breadcrumb-area pt-35 pb-35 bg-gray">
        <div class="container">
            <div class="breadcrumb-content text-center">
                <ul>
                    <li><a href="<%=path%>/front/index.jsp">主页</a></li>
                    <li class="active">商品列表</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="shop-area pt-95 pb-100">
        <div class="container">
            <div class="row flex-row-reverse">
                <div class="col-lg-9">
                    <div class="shop-top-bar">
                    </div>
                    <div class="shop-bottom-area mt-35" id="products">
                        <div class="tab-content jump">
                            <div id="shop-1" class="tab-pane active">
                                <div class="row ht-products">

                                    <div v-for="item in products" class="col-xl-4 col-md-6 col-lg-6 col-sm-6">
                                        <!--Product Start-->
                                        <div class="ht-product ht-product-action-on-hover ht-product-category-right-bottom mb-30">
                                            <div class="ht-product-inner">
                                                <div class="ht-product-image-wrap">
                                                    <a :href="'${path}/furniture/details?furnitureId='+item.furnitureId"
                                                       class="ht-product-image">
                                                        <img :src="item.furnitureImg" alt="Universal Product Style">
                                                    </a>
                                                    <div class="ht-product-action">
                                                        <ul>
                                                            <li><a href="#"><i class="sli sli-heart"></i><span
                                                                    class="ht-product-action-tooltip">Add to Wishlist</span></a>
                                                            </li>
                                                            <li><a href="#"><i class="sli sli-bag"></i><span
                                                                    class="ht-product-action-tooltip">Add to Cart</span></a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="ht-product-content">
                                                    <div class="ht-product-content-inner">
                                                        <div class="ht-product-categories"><a href="#">{{item.categoryName}}</a>
                                                        </div>
                                                        <h4 class="ht-product-title"><a href="product-details.jsp">{{item.furnitureName}}</a>
                                                        </h4>
                                                        <div class="ht-product-price"><span
                                                                class="new">$ {{item.price}}</span><span class="old">$ {{Math.floor(item.price*1.2)}}</span>
                                                        </div>
                                                        <div class="ht-product-ratting-wrap"><span
                                                                class="ht-product-ratting"><span
                                                                class="ht-product-user-ratting" style="width: 100%;"><i
                                                                class="sli sli-star"></i><i class="sli sli-star"></i><i
                                                                class="sli sli-star"></i><i class="sli sli-star"></i><i
                                                                class="sli sli-star"></i></span><i
                                                                class="sli sli-star"></i><i class="sli sli-star"></i><i
                                                                class="sli sli-star"></i><i class="sli sli-star"></i><i
                                                                class="sli sli-star"></i></span></div>
                                                    </div>
                                                    <div class="ht-product-action">
                                                        <ul>
                                                            <li><a href="#"><i class="sli sli-magnifier"></i><span
                                                                    class="ht-product-action-tooltip">Quick View</span></a>
                                                            </li>
                                                            <li><a href="#"><i class="sli sli-heart"></i><span
                                                                    class="ht-product-action-tooltip">Add to Wishlist</span></a>
                                                            </li>
                                                            <li><a href="#"><i class="sli sli-refresh"></i><span
                                                                    class="ht-product-action-tooltip">Add to Compare</span></a>
                                                            </li>
                                                            <li><a href="#"><i class="sli sli-bag"></i><span
                                                                    class="ht-product-action-tooltip">Add to Cart</span></a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                    <div class="ht-product-countdown-wrap">
                                                        <div class="ht-product-countdown"
                                                             data-countdown="2020/01/01"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div><!--Product End--></div>
                                </div>
                            </div>

                        </div>
                        <!--                        <div class="pro-pagination-style text-center mt-30">-->
                        <!--                            <ul>-->
                        <!--                                <li><a class="prev" href="#"><i class="sli sli-arrow-left"></i></a></li>-->
                        <!--                                <li><a class="active" href="#">1</a></li>-->
                        <!--                                <li><a href="#">2</a></li>-->
                        <!--                                <li><a class="next" href="#"><i class="sli sli-arrow-right"></i></a></li>-->
                        <!--                            </ul>-->
                        <!--                        </div>-->
                        <!-- 分页-->
                        <div id="test1"></div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="sidebar-style mr-30">
                        <div class="sidebar-widget"><h4 class="pro-sidebar-title">Search</h4>
                            <div class="pro-sidebar-search mb-50 mt-25">
                                <div class="pro-sidebar-search-form" action="#">
                                    <input type="text" v-model="search" placeholder="Search here...">
                                    <button @click="clickSearch()"><i class="sli sli-magnifier"></i></button>
                                </div>
                            </div>
                        </div>
<%--                        <div class="sidebar-widget"><h4 class="pro-sidebar-title">Refine By</h4>--%>
<%--                            <div class="sidebar-widget-list mt-30">--%>
<%--                                <ul>--%>
<%--                                    <li>--%>
<%--                                        <div class="sidebar-widget-list-left"><input type="checkbox"><a href="#">On Sale--%>
<%--                                            <span>4</span></a><span class="checkmark"></span></div>--%>
<%--                                    </li>--%>
<%--                                    <li>--%>
<%--                                        <div class="sidebar-widget-list-left"><input type="checkbox" value=""><a--%>
<%--                                                href="#">New <span>5</span></a><span class="checkmark"></span></div>--%>
<%--                                    </li>--%>
<%--                                    <li>--%>
<%--                                        <div class="sidebar-widget-list-left"><input type="checkbox" value=""><a--%>
<%--                                                href="#">In Stock <span>6</span></a><span class="checkmark"></span>--%>
<%--                                        </div>--%>
<%--                                    </li>--%>
<%--                                </ul>--%>
<%--                            </div>--%>
<%--                        </div>--%>
                        <div class="sidebar-widget mt-45"><h4 class="pro-sidebar-title">Filter By Price</h4>
                            <div class="price-filter mt-10">
                                <div class="price-slider-amount"><input type="text" id="amount" name="price"
                                                                        placeholder="Add Your Price"/></div>
                                <div id="slider-range"></div>
                            </div>
                        </div>


                        <div class="sidebar-widget mt-50"><h4 class="pro-sidebar-title">Tag</h4>
                            <div class="sidebar-widget-tag mt-25">
                                <ul>
                                    <li v-for="item in category"><a :href="'/furniture/furniture/getByCategory?categoryId='+item.categoryId">{{item.categoryName}}</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="footer-area bg-paleturquoise">
        <div class="container">
            <div class="footer-top text-center pt-45 pb-45">
                <nav>
                    <ul>
                        <li><a href="#">Home </a></li>
                        <li><a href="#">Shop </a></li>
                        <li><a href="#">Accessories </a></li>
                        <li><a href="#">Contact </a></li>
                        <li><a href="#">About </a></li>
                        <li><a href="#">Blog </a></li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="footer-bottom border-top-1 pt-20">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-4 col-md-5 col-12">
                        <div class="footer-social pb-20"><a href="#">Facebok</a><a href="#">Twitter</a><a href="#">Linkedin</a><a
                                href="#">Instagram</a></div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-12">
                        <div class="copyright text-center pb-20"><p>Copyright Â© All Right <a
                                href="http://www.bootstrapmb.com/" title="bootstrapmb">Reserved</a></p></div>
                    </div>
                    <div class="col-lg-4 col-md-3 col-12">
                        <div class="payment-mathod pb-20"><a href="#"><img src="assets/img/icon-img/payment.png" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>
<!-- vue.js -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/shop.js"></script>

<!-- All JS is here============================================ --><!-- jQuery JS -->
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script><!-- Popper JS -->
<script src="assets/js/popper.min.js"></script><!-- Bootstrap JS -->
<script src="assets/js/bootstrap.min.js"></script><!-- Plugins JS -->
<script src="assets/js/plugins.js"></script><!-- Ajax Mail -->
<script src="assets/js/ajax-mail.js"></script><!-- Main JS -->

<script src="assets/js/main.js"></script>
</body>
</html>